<?php
$this->title = '话费充值';
?>


<style type="text/css">
    .middle {
        width: 600px;
        height: 390px;
        margin: 10px auto;
    }

    .phone {
        margin-top: 20px;
        width: 400px;
        height: 40px;
        border-radius: 5px;
        background: #ffffff;
    }

    .phone .num {
        margin-left: 10px;
        width: 400px;
        height: 40px;
        color: #595757;
        font-family: "微软雅黑";
    }

    .cost {
        width:500px;
        margin-top: 1.825rem;
        overflow: hidden;
    }

    .cost ul li {
        width: 80px;
        height: 30px;
        border: 1px solid #efefef;
        margin-right: 10px;
        float: left;
        color: #9fa0a0;
        background-color: #ffffff;
        text-align: center;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .account {
        position: relative;
        width: 400px;
        border-top: 1px solid #edeeee;
        margin-top: 2.25rem;
        margin-left: .875rem;
        overflow: hidden;
    }

    .account .gain-num {
        float: left;
        margin-top: 1rem;
        margin-left: .45rem;
    }

    .account .gain-num .telephone-charge {
        color: #595757;
    }

    .account .gain-num .telephone-charge .telephone-charge-num {
        color: #e50038;
    }

    .account .line {
        width: 1px;
        height: 3.5rem;
        position: absolute;
        left: 14.15rem;
        top: .25rem;
        background: #eeeeee;
    }

    .account .practical {
        float: right;
        margin-top: 1rem;
        margin-right: .45rem;
    }

    .account .practical .pay, .account .practical .balance {
        color: #595757;
        margin-bottom: .9rem;
    }

    .account .practical .pay-num, .account .practical .balance-num {
        color: #e50038;
    }

    .btn {
        display: block;
        margin-left: .875rem;
        margin-top: 2.9rem;
        width: 400px;
        height: 40px;
        background: #f7f8f8;
        text-align: center;
        line-height: 40px;
        color: #595757;
    }

    .border-k {
        border: 1px solid #e50038 !important;
        color: #E50038 !important;
    }
</style>
<div class="middle">
    <div class="main">
        <div class="phone">
            <input id="txtPhone" class="num" type="number" value="" placeholder="输入手机号"/>
        </div>
        <div class="cost">
            <ul>
                <li class="border-k" data-price="1" id="tttt">1元</li>
                <li data-price="20">20元</li>
                <li data-price="30">30元</li>
                <li data-price="50">50元</li>
                <li data-price="100">100元</li>
                <li data-price="200">200元</li>
                <li data-price="300">300元</li>
            </ul>
        </div>
        <div class="account">
            <div class="gain-num">
                <p class="telephone-charge">到账话费：<span class="telephone-charge-num" id="txtRmb">1</span> 元</p>
            </div>
            <div class="line"></div>
            <div class="practical" id="normalDiv" style="display: none;">
                <p class="pay">实际支付：<span class="pay-num" id="txtIntegral">20</span> 积分</p>
                <p class="balance">可用积分：<span class="balance-num">0</span> 积分</p>
            </div>
            <div class="practical" id="activityDiv">
                <p class="pay" style="text-decoration: line-through;">实际支付：<span class="pay-num" id="txtIntegral">1</span> 积分</p>
                <p class="balance">活动价：<span class="balance-num">免费</span></p>
            </div>
        </div>
        <a class="btn" id="btnNormalRecharge" style="display: none;">立即充值</a>
        <a class="btn" style="background-color: #e50038; color: #ffffff;" id="btnRecharge">立即充值</a>
    </div>
</div>
<script type="text/javascript">
    var isRecharge = false;
    $(function () {
        $(".cost ul li").click(function () {
            $('#activityDiv').hide();
            $('#btnRecharge').hide();
            $('#normalDiv').show();
            $('#btnNormalRecharge').show();
            $(this).addClass("border-k").siblings().removeClass("border-k");
            var price = $(this).data('price');
            $('#txtRmb').text(price);
            $('#txtIntegral').text(price);

            if ($(this).attr('id') == 'tttt') {
                $('#activityDiv').show();
                $('#btnRecharge').show();
                $('#normalDiv').hide();
                $('#btnNormalRecharge').hide();
            }
        });


        $('#btnRecharge').click(function () {
            if (isRecharge == true)return;
            isRecharge = true;
            var txtPhone = $('#txtPhone').val();
            if (txtPhone.length == 0) {
                alert('请输入手机号!');
                isRecharge = false;
                return;
            }
            $(this).text('正在充值,请稍等....');
            requestJson('phone-recharge-handler', {phone: txtPhone}, true, function (responseData) {
                if (responseData.status == 0) {
                    alert('充值成功!');
                } else {
                    alert('充值失败!请重试!' + responseData.message);
                }
                isRecharge = false;
                window.location.reload();
            }, function () {
                isRecharge = false;
            })
        });
    });
</script>